<template>
  <div class="header">
    <!-- 图片轮播 -->
    <div class="header_swipe">
      <mt-swipe :auto="4000" :show-indicators="false" class="header-swipe--container">
        <mt-swipe-item v-for="item of swipe" :key="item.index">
          <img :src="item.img" class="swiperimg">
        </mt-swipe-item>
      </mt-swipe>
      <!-- 热门项目 -->
      <div class="product_header">
      <div class="header_product_hot">
        <div class="header_product_one">
            <div class="header_product_one_flex">
            <div class="header_product-span"></div>
            <div>热门项目</div>
            </div>
        </div>
        <div class="header-product-two">查看更多></div>
      </div>
      <!-- 商品 -->
        <div class="header_product_details" v-for="item of product" :key="item.index">
          <img v-lazy="item.img" alt class="header_product_details_img">
          <div class="header_product_details_right">
            <p class="header_product_details_title">{{item.title}}</p>
            <p class="header_product_details_content">{{item.content}}</p>
            <div class="header_product_details_footer">
              <p class="header_product_details_price">￥{{item.price}}</p>
              <div class="header_product_details_link">购买</div>
            </div>
          </div>
        </div>
      
      <!-- 新品上架 -->
     <div class="header_product_hot">
        <div class="header_product_one">
            <div class="header_product_one_flex">
            <div class="header_product-span"></div>
            <div>新品上架</div>
            </div>
        </div>
        <div class="header-product-two">查看更多></div>
      </div>
      <div>
        <div class="header_product_details" v-for="item of newProduct" :key="item.index">
          <img v-lazy="item.img" alt class="header_product_details_img">
          <div class="header_product_details_right">
            <p class="header_product_details_title">{{item.title}}</p>
            <p class="header_product_details_content">{{item.content}}</p>
            <div class="header_product_details_footer">
              <p class="header_product_details_price">￥{{item.price}}</p>
              <div class="header_product_details_link">购买</div>
            </div>
          </div>
        </div>
      </div>
      <div class="header_return_details" @click="backTop()">
        <span>
          <div class="header_return_deatails_top">
            <i>
              <img src="../../../public/img/footer/returntop.png">
            </i>
            <i>顶部</i>
          </div>
        </span>
      </div>
      </div>
      <footer-box></footer-box>
    </div>
  </div>
</template>
<script>
import Footer from "./footer.vue";
export default {
  components: {
    FooterBox: Footer
  },
  data() {
    return {
      swipe: [],
      product: [],
      newProduct: [],
      //   导航栏
      sort: []
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    getpresent(){
      console.log(123);
    },
    //导航条方法
    getnav() {
      for(var i=0;i<this.sort.length;i++){
        console.log(this.sort[i]);
      }
    },
    //返回顶部的方法
    backTop() {
      var timer = setInterval(() => {
        console.log(document.documentElement.scrollTop);
        document.documentElement.scrollTop -= 100;
        if (document.documentElement.scrollTop <= 0) {
          clearInterval(timer);
        }
      }, 40);
    },
    //获取后台数据
    getdata() {
      this.$axios.get("http://localhost:8080/abc").then(data => {
        this.swipe = data.data.swiper;
        this.product = data.data.product;
        this.newProduct = data.data.newProduct;
        this.sort = data.data.sort;
        this.getnav();
      });
    }
  }
};
</script>

<style scoped>
/* 公共样式 */
a {
  text-decoration: none;
  color: #959595;
}
p {
  padding: 0px;
  margin: 0px;
}
ul {
  margin: 0;
  padding: 0;
}
.header {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  margin-top:40px;
}
div.header_header {
  text-align: center;
}
/* 导航条 */
div.product_header{
    width: 95%;
    margin:0 auto;
}
div.header-navigation ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
li {
  border-bottom: 0px solid #29BF9D;
}
li:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 20px;
  border-bottom: 2px solid #29BF9D;
}
li:hover::before {
  width: 100%;
}
li:active{
  color: #29BF9D;
}
/* 热门商品 */
div.header_product {
  display: flex;
  justify-content: space-between;
}
div.header_swipe {
  height: 200px;
  width: 100%;
  margin-top: 20px;
}
div.header_product_hot {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 10px;
  line-height: 24px;
}
div.header_product_one {
  font-weight: 900;
}
div.header_product_one_flex{
    display: flex;
}
div.header_product_one div.header_product-span{
    background: #29BF9D;
    display: inline-block;
    width: 5px;
    height: 24px;
    margin-right: 5px;
}
.header_product_details_img {
  border-radius: 20px;
}
div.header_product_details {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 14px;
}
div.header_product_details_footer {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
div.header_product_details_link {
  border: 1px solid #eb6c7f;
  background: #eb6c7f;
  color: #fbeaec;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 8px;
}
div.header_product_details_right {
  margin-left: 14px;
}
div.header_return_details {
  height: 130px;
  position: relative;
}
div.header_return_details span {
  position: absolute;
  right: 0px;
  border: 1px solid #eaeaea;
  border-radius: 50%;
  background: #fefefe;
  font-size: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
}
p.header_product_details_price {
  color: #dc0d0d;
  line-height: 28px;
}
div.header_return_details span i:first-child {
  position: absolute;
  right: 19px;
  top: 0px;
  margin-bottom: 10px;
}
div.header_return_details span i img {
  height: 20px;
  width: 20px;
}
div.header_return_details span i:last-child {
  font-style: normal;
  padding-left: 2px;
}
div.header_return_deatails_top {
  height: 28px;
  width: 28px;
  line-height: 45px;
}
p.header_product_details_title {
  font-weight: 900;
  color: #3b3b3b;
  font-size: 15px;
}
p.header_product_details_content {
  color: #86928e;
}
/* 轮播图片大小 */
img.swiperimg {
  height: 200px;
  width: 100%;
}
img.header_product_details_img {
  height: 149px;
  width: 40%;
}
</style>
